import { View, Image, Text, SwiperItem, Swiper } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui';
import { checkAuth } from '@/utils/authUtil';
import locationIcon from '@/assets/images/home/location.png';
import changeIcon from '@/assets/images/home/change.png';
import searchIcon from '@/assets/images/home/search.png';
import giftIcon from '@/assets/images/home/gift.png';
import './index.scss';

export default function ({ shopInfo, activityList }) {
  const locationed: any = Taro.getStorageSync('LOCATION_AUTH');
  const toSearchPage = () => {
    Taro.navigateTo({
      url: '/subPages/search/index',
    });
  };
  const toShopList = () => {
    Taro.navigateTo({
      url: '/subPages/shop/list',
    });
  };
  const toActivityPage = () => {
    checkAuth(() => {
      Taro.navigateTo({
        url: '/pages/activity/index',
      });
    });
  };
  return (
    <View className="home-header">
      <View className="red-bg">
        <View className="position-container" onClick={toShopList}>
          <View className="position-left">
            <Image className="location-icon" src={locationIcon} />
            <Text className="position-text">{shopInfo.store_name}</Text>
            <AtIcon value="chevron-down" className="down-arrow" color="#fff" size="20rpx" />
            {locationed ? (
              <Text className="sub-text">
                离您
                {shopInfo.distance > 1000
                  ? `${(shopInfo.distance / 1000).toFixed(2)}km`
                  : `${shopInfo.distance}m`}
              </Text>
            ) : (
              <Text className="sub-text">未开启定位</Text>
            )}
          </View>
          <Image className="change-icon" src={changeIcon} />
        </View>
        <View className="search-bar" onClick={toSearchPage}>
          <Image className="search-icon" src={searchIcon} />
          <Text className="search-text">搜索您喜欢的产品吧</Text>
        </View>
      </View>
      {activityList.length > 0 && (
        <View className="activity-bar" onClick={toActivityPage}>
          <View className="activity-title">
            <Image src={giftIcon} />
          </View>
          <Swiper
            className="activity-swiper"
            indicatorColor="#999"
            indicatorActiveColor="#333"
            circular
            autoplay
            duration={500}
            vertical
            interval={3000}
          >
            {activityList.map((item) => {
              return (
                <SwiperItem key={item.id}>
                  <View className="swiper-item">{item.title}</View>
                </SwiperItem>
              );
            })}
          </Swiper>
          <View className="right-btn">福利活动</View>
        </View>
      )}
    </View>
  );
}
